<template>
  <div class="navbar">
    <div class="navbar-header">
      <div class="logo">
        <h2>智慧课堂</h2>
      </div>
    </div>
    
    <nav class="navbar-menu">
      <ul class="menu-list">
        <li class="menu-item">
          <router-link to="/dashboard" class="menu-link" active-class="active">
            <span class="menu-icon">🏠</span>
            <span class="menu-text">主页</span>
          </router-link>
        </li>
        
        <!-- 3D功能菜单 -->
        <li class="menu-section">
          <div class="section-title">🌟 3D智慧课程</div>
        </li>
        
        <li class="menu-item">
          <router-link to="/3d-classroom" class="menu-link" active-class="active">
            <span class="menu-icon">🏫</span>
            <span class="menu-text">3D互动课堂</span>
          </router-link>
        </li>
        
        <li class="menu-item">
          <router-link to="/course-management" class="menu-link" active-class="active">
            <span class="menu-icon">⚙️</span>
            <span class="menu-text">智慧课程管理</span>
          </router-link>
        </li>
        
        <!-- 开发测试菜单 -->
        <li class="menu-section">
          <div class="section-title">🔧 开发测试</div>
        </li>
        
        <li class="menu-item">
          <router-link to="/data-sync-test" class="menu-link" active-class="active">
            <span class="menu-icon">📊</span>
            <span class="menu-text">数据联动测试</span>
          </router-link>
        </li>
      </ul>
    </nav>
    
    <div class="navbar-footer">
      <div class="user-info">
        <div class="user-avatar">Admin</div>
        <div class="user-name">管理员</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Navbar",
  components: {},
  data() {
    return {}
  }
}
</script>

<style scoped lang="scss">
.navbar {
  width: var(--navbar-width);
  height: 100%;
  background-color: #001529;
  color: #fff;
  display: flex;
  flex-direction: column;
  
  .navbar-header {
    padding: 20px;
    border-bottom: 1px solid #ffffff1a;
    
    .logo {
      text-align: center;
      
      h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #fff;
      }
    }
  }
  
  .navbar-menu {
    flex: 1;
    padding: 20px 0;
    
    .menu-list {
      list-style: none;
      margin: 0;
      padding: 0;
      
      .menu-section {
        margin: 20px 0 10px 0;
        
        .section-title {
          padding: 8px 20px;
          color: #ffffff80;
          font-size: 12px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 1px;
          border-bottom: 1px solid #ffffff1a;
        }
      }
      
      .menu-item {
        margin-bottom: 5px;
        
        .menu-link {
          display: flex;
          align-items: center;
          padding: 12px 20px;
          color: #ffffff80;
          text-decoration: none;
          transition: all 0.3s;
          border-radius: 0 25px 25px 0;
          margin-right: 20px;
          
          &:hover {
            background-color: #1890ff;
            color: #fff;
            transform: translateX(5px);
          }
          
          &.active {
            background-color: #1890ff;
            color: #fff;
            box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
          }
          
          .menu-icon {
            font-size: 18px;
            margin-right: 12px;
            width: 24px;
            text-align: center;
          }
          
          .menu-text {
            font-size: 14px;
            font-weight: 500;
          }
        }
      }
    }
  }
  
  .navbar-footer {
    padding: 20px;
    border-top: 1px solid #ffffff1a;
    
    .user-info {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .user-avatar {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
      }
      
      .user-name {
        font-size: 14px;
        color: #ffffff80;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .navbar {
    .menu-link {
      .menu-text {
        display: none;
      }
      
      .menu-icon {
        margin-right: 0;
      }
    }
    
    .navbar-header .logo h2 {
      font-size: 16px;
    }
    
    .user-info .user-name {
      display: none;
    }
  }
}
</style>